import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet,
    TextInput
} from 'react-native';

import {
    Tip,
    Loading
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import Footer from './components/footer';
import Connect from '../../../utils/connect';
import Container from './components/container';

import userAction from '../../../state/actions/user';
import * as userTypes from '../../../state/types/user';

interface Props {
    page:number,
    hasPre:boolean,
    userActions:any,
    onPageChange:Function
}

interface State {
    about:string
}

@Connect({
    userActions:userAction
})
class About extends PureComponent<Props,State> {
    state = {
        about:``
    }

    static defaultProps = {
        page:0,
        hasPre:true,
        userActions:{},
        onPageChange:() => null
    }

    get disabled() {
        const {
            about
        } = this.state;
        return !about.trim();
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    private toPrePage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page - 1);
    }

    private toNextPage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page + 1);
    }

    private onChangeText = (text:string) => {
        this.setState({
            about:text
        })
    }

    private onSubmit = async () => {
        const {
            about
        } = this.state;

        const para = {
            about:about
        }

        Loading.show();
        try {
            await this.userActions[
                userTypes.setUserProfile
            ](para);
            this.toNextPage()
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close()
    }

    render() {
        const {
            about
        } = this.state;

        const {
            hasPre
        } = this.props;

        return (
            <Fragment>
                <Container>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Introduce yourself?
                        </Text>
                        <View style={styles.rowContent}>
                            <View style={styles.inputContent}>
                                <TextInput
                                    value={about}
                                    multiline={true}
                                    style={styles.inputStyle}
                                    placeholder="White something"
                                    placeholderTextColor="#bbbbbb"
                                    onChangeText={this.onChangeText}
                                />
                            </View>
                        </View>
                    </View>
                </Container>
                <Footer
                    okText="Done"
                    showPre={hasPre}
                    disabled={this.disabled}
                    nextPress={this.onSubmit}
                    prePress={this.toPrePage}
                />
            </Fragment>
        )
    }
}

export default About;

const styles = StyleSheet.create({
    itemRow:{
        marginBottom:40
    },
    title:{
        fontSize:20,
        color:`#000`,
        fontWeight:`bold`
    },
    rowContent:{
        paddingTop:18
    },
    inputStyle:{
        flex:1,
        fontSize:16,
        color:`#333`,
        textAlignVertical: 'top'
    },
    inputContent:{
        padding:8,
        height:200,
        borderWidth: .8,
        flexDirection: `row`,
        borderColor: `#ccc`,
        backgroundColor:`#fff`
    }
}) as any;